<template>
	<view>
  <div ref="chartContainer" style="width: 100%; height: 400px;"></div>
  </view>
  <view><button @click="fetchData">http</button></view>
  <view>{{f}}</view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts';

const chartContainer = ref(null);
const chartInstance = ref(null);
// 将option声明为响应式变量
const option = ref({
  title: {
    text: 'Stacked Line'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Union Ads',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ads',
      type: 'line',
      stack: 'Total',
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: 'Direct',
      type: 'line',
      stack: 'Total',
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: 'Search Engine',
      type: 'line',
      stack: 'Total',
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
});

// 初始化图表
const initChart = () => {
  chartInstance.value = echarts.init(chartContainer.value);
  chartInstance.value.setOption(option.value);
};

// 动态添加数据
const addRandomData = () => {
  // 为每个系列添加随机数据
  option.value.series.forEach((series, index) => {
    const newData = Math.round(Math.random() * 1000);
    series.data.push(newData);
  });

  // 更新图表
  chartInstance.value.setOption({
    series: option.value.series
  });

  // 如果数据点超过7个，移除第一个数据点
  if (option.value.series[0].data.length > 7) {
    option.value.series.forEach((series) => {
      series.data.shift();
    });
    // 重新设置图表以更新x轴标签
    chartInstance.value.setOption(option.value);
  }
};

// 设置定时器，每2秒添加一次数据
const intervalId = setInterval(addRandomData, 2000);

onMounted(() => {
  initChart();
});

onUnmounted(() => {
  clearInterval(intervalId);
});

// 定义响应数据和状态
const data = ref(null);
const loading = ref(false);
const error = ref('');
const f =ref(1);
// 获取数据的函数
const fetchData = () => {
  loading.value = true; // 设置为加载中
  error.value = ''; // 清除之前的错误信息
  addRandomData();
  uni.request({
    url: 'http://ly_fast_charging.local/update', // 替换为你的 API 地址
    method: 'GET',
    header: {
      'Content-Type': 'application/json'
    },
    success: (res) => {
      // if (res.statusCode === 200) {
		  // data.value = {};
        // data.value = JSON.parse(res.data);; // 更新数据
		data.data = res.data;
		console.log(data.data);
		console.log(data.data.name_1);
		f.value = data.data.count;
		console.log(f.value);
		
      // } else {
      //   error.value = `请求失败，状态码: ${res.statusCode}`; // 处理错误
      // }
    },
    fail: (err) => {
      error.value = `请求失败，错误信息: ${err}`; // 处理请求失败
    },
    complete: () => {
      loading.value = false; // 请求完成，隐藏加载中
    }
  });
};
</script>